<template>
	<view class="navigation">
		<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
			@buttonClick="buttonClick" />
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		name: "navigation-market",
		data() {
			return {
				options: [
					// {
					// 	icon: 'headphones',
					// 	text: '客服'
					// },
					// {
					// 	icon: 'shop',
					// 	text: '店铺',
					// 	info: 0,
					// 	infoBackgroundColor: '#007aff',
					// 	infoColor: "red"
					// },
					{
						icon: 'cart',
						text: '购物车',
						info: 0
					}
				],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ffa200',
						color: '#fff'
					}
				]
			}
		},
		watch: {
			// 监听 taotal 值的变化
			total: {
				// 调用 methods 中的 setBadge 方法，重新为 tabBar 的数字徽章赋值
				handler(newValue, oldValue) {
					this.options[0].info = newValue
				},
				immediate: true
			}
		},
		// 生命周期
		computed: {
			...mapGetters("m_cart", ["total"]),
		},
		methods: {
			onClick(e) {
				if (e.content.text === '购物车') {
					uni.switchTab({
						url: '../../pages/cart/cart'
					})
				}
			},
			buttonClick(e) {
				if (e.content.text === '加入购物车') {
					if (!this.$store.state.m_user.token) {
						let second = 3;
						let timer = setInterval(() => {
							uni.showToast({
								title: `未登录,${second}后去登录界面`,
								duration: 3000,
								icon: 'none'
							})
							second--
							if (second <= 0) {
								uni.navigateTo({
									url: '../../pages/login/login'
								})
								second = 3
								clearInterval(timer)
							}
						}, 1000)

					} else {
						this.$emit('addCart')
					}
				} else {
					if (this.$store.state.m_user.token) {
						this.$emit('handleToOrder')
						// uni.navigateTo({
						// 	url:'../../pages/order/order'
						// })
					} else {
						uni.$showMsg('你还未登录!')
					}

				}
			}
		}
	}
</script>

<style scoped>
	.navigation {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		height: 100rpx;
		/* background-color: #0066CC; */
	}
</style>
